<template>
	<div class="vip_wrap">
		<uni-popup ref="popup" type="center" :show="isShow" :isRadius="true" :custom="true" maxHeight="600rpx" @change="popChange">
			<div class="vipTip_wrap">
				<view class="iconclose_wrap" @click="closeMask">
					<i class="iconfont iconclose"></i>
				</view>
				<p class="vip_tips">该功能为VIP专属，需升级为VIP会员才能使用!</p>
				<!-- :to="{name: 'VipGuide'}" -->
				<div class="open_btn" @click="goUpdate">去升级</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup'

export default {
	name: 'OpenVIP',
	components: {
		uniPopup
	},
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			constant: this.$constant,
			isShow: false
		}
	},
	watch: {
		show(val) {
			this.isShow = val
		}
	},
	methods: {
		closeMask() {
			this.isShow = false
			this.$emit('update:show', false)
		},
		popChange(val) {
			if (!val.show) {
				this.closeMask()
			}
		},
		goUpdate() {
			uni.navigateTo({
				url: `/pages/admin/vip/vipGuide`
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.vipTip_wrap {
		padding: 285px 50px 50px;
		// width: 530px;
		background: rgba(255, 255, 255, 1);
		border-radius: 20px;
		overflow: hidden;
		position: relative;
		background: url($imgUrl+'vip/becomeVip.png') no-repeat center top/100% 250px;
		.iconclose_wrap {
			top: 20px;
			right: 20px;
			position: absolute;
			width: 60px;
			height: 60px;
			@include direction(center, center);
			.iconclose {
				color: #fff;
				font-size: 28px;
			}
		}
		.vip_tips {
			text-align: center;
			font-size: 34px;
			color: rgba(51, 51, 51, 1);
			line-height: 48px;
		}
		.open_btn {
			display: block;
			text-align: center;
			margin-top: 53px;
			height: 90px;
			line-height: 90px;
			background: linear-gradient(90deg, rgba(244, 224, 178, 1), rgba(222, 177, 124, 1));
			box-shadow: 0px 2px 6px 0px rgba(225, 184, 132, 0.29);
			border-radius: 45px;
			font-size: 32px;
			font-weight: 600;
			color: rgba(83, 51, 0, 1);
		}
	}
</style>
